<template>
	<view class="wrap">
		<view class="wrap-search align-center" @click="goSearch">
			<view class="wrap-search-fdj"></view>
			<view class="wrap-search-text">
				请输入昵称或者姓名
			</view>
			<view class="wrap-search-btn">
				搜索
			</view>
		</view>
		<view class="wrap-condition">
			<view class="wrap-condition-title">
				基础筛选
			</view>
			<view class="wrap-condition-list">
				<view class="wrap-condition-list-t align-justify-space-between">
					<view class="wrap-condition-list-t-l">
						年龄
					</view>
					<view class="wrap-condition-list-t-r">
						{{filterConfig.minAge}}-{{filterConfig.maxAge}}岁
					</view>
				</view>
				<up-slider :range-value="[filterConfig.minAge,filterConfig.maxAge]" min="18" max="60" :blockSize="24" :isRange="true" activeColor="#FF47AB"
					inactiveColor="#D9D9D9" @changing="handleSlider($event,'minAge','maxAge')"></up-slider>
			</view>
			<view class="wrap-condition-list">
				<view class="wrap-condition-list-t align-justify-space-between">
					<view class="wrap-condition-list-t-l">
						身高
					</view>
					<view class="wrap-condition-list-t-r">
						{{filterConfig.minHeight}}-{{filterConfig.maxHeight}}cm
					</view>
				</view>
				<up-slider :range-value="[filterConfig.minHeight,filterConfig.maxHeight]" min="130" max="210" :blockSize="24" :isRange="true"
					activeColor="#FF47AB" inactiveColor="#D9D9D9" @changing="handleSlider($event,'minHeight','maxHeight')"></up-slider>
			</view>
			<view class="wrap-condition-list">
				<view class="wrap-condition-list-t align-justify-space-between">
					<view class="wrap-condition-list-t-l">
						体重
					</view>
					<view class="wrap-condition-list-t-r">
						{{filterConfig.minWeight}}-{{filterConfig.maxWeight}}kg
					</view>
				</view>
				<up-slider :range-value="[filterConfig.minWeight,filterConfig.maxWeight]" min="40" max="150" :blockSize="24" :isRange="true" activeColor="#FF47AB"
					inactiveColor="#D9D9D9" @changing="handleSlider($event,'minWeight','maxWeight')"></up-slider>
			</view>
			<view class="wrap-condition-list">
				<view class="wrap-condition-list-t align-justify-space-between">
					<view class="wrap-condition-list-t-l">
						月收入
					</view>
					<view class="wrap-condition-list-t-r">
						{{filterConfig.defaultMinIncome}}-{{filterConfig.defaultMaxIncome}}{{filterConfig.defaultMaxIncome == 20000 ? '及以上' : '元'}}
					</view>
				</view>
				<up-slider :range-value="[filterConfig.defaultMinIncome,filterConfig.defaultMaxIncome]" min="2000" max="20000" :blockSize="24" :isRange="true" activeColor="#FF47AB"
					inactiveColor="#D9D9D9" @changing="handleSlider($event,'defaultMinIncome','defaultMaxIncome')" @change="handleIncome"></up-slider>
			</view>
			<view class="wrap-condition-list">
				<view class="wrap-condition-list-title align-center">
					婚姻状况
					<view class="wrap-condition-list-title-small">
						(可多选)
					</view>
				</view>
				<view class="wrap-condition-list-t align-justify-space-between">
					<view @click="hanldeMarriage(-1)"
						class="wrap-condition-list-t-l marriage-list align-justify-center"
						:class="{active:marriageIndex == -1}">
						不限
					</view>
					<view @click="hanldeMarriage(item.key)"
						class="wrap-condition-list-t-l marriage-list align-justify-center"
						:class="{active:marriageIndex == item.key}" :key="item.key" v-for="item in marriage">
						{{item.val}}
					</view>
				</view>
			</view>
			<view class="wrap-condition-list" @click="handleClickBtn(0)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.educationalVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							学历
							<view class="wrap-condition-list-title-small">
								(可多选)
							</view>
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-list margin-top-0px" @click="handleClickPicker(0)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.addressDistrictVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							居住地区
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-list margin-top-0px" @click="handleClickPicker(1)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.workIdVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							职业
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-list margin-top-0px" @click="handleClickBtn(1)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.buyHouseVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							住房情况
							<view class="wrap-condition-list-title-small">
								(可多选)
							</view>
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-list margin-top-0px" @click="handleClickBtn(2)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.buyCarVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							买车情况
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-list margin-top-0px" @click="handleClickBtn(3)">
				<up-cell :isLink="true" :border="false" :value="filterConfig.isChildVal || '不限'">
					<template #title>
						<view class="wrap-condition-list-title align-center">
							有没有孩子
							<view class="wrap-condition-list-title-small">
								(可多选)
							</view>
						</view>
					</template>
				</up-cell>
			</view>
			<view class="wrap-condition-btn align-justify-space-around">
				<view class="wrap-condition-btn-list wrap-condition-btn-l align-justify-center" @click="handleReset">
					重置
				</view>
				<view class="wrap-condition-btn-list wrap-condition-btn-r align-justify-center" @click="handleSure">
					确认
				</view>
			</view>
		</view>
		<btnPopup ref="btnPopupRef" :experienceShow="experienceShow" :data="conditionList[0]" @popupClose="popupClose"
			@conditionSure="conditionSure" :multiple="true" />
		<pickerPopup :pickerShow="pickerShow" :columns="columns" @cancel="cancel" @confirm="confirm"
			:title="pickerTitle" />
	</view>
</template>

<script setup>
	import btnPopup from '/pages/common/btnPopup/index.vue'
	import pickerPopup from '/pages/common/pickerPopup/index.vue'
	import cityJson from '../../static/json/city.json'
	import { ref,reactive } from 'vue'
	import { useDictStore, useUserStore } from '@/store'

    const filterConfig = ref(useDictStore().getFilterConfig())
	const age = ref([20, 40])
	const stature = ref([20, 40])
	const weight = ref([20, 40])
	const income = ref([20, 40])
	const marriage = ref(useDictStore().getDict().value.marryStatus)
	const marriageIndex = ref(-1)
	const experienceShow = ref(false)
	const bthPickerIndex = ref(0)
	const conditionList = reactive([{
		title: '学历',
		subTitle: '（可多选）',
		arr: useDictStore().getDict().value.education,
	}])
	const pickerShow = ref(false)
	const pickerIndex = ref(0)
	const pickerTitle = ref('')
	const columns = reactive([])
	const btnPopupRef = ref(null)
	
	const handleSlider = (evt,val1,val2) => {
		const [min,max] = evt
		filterConfig.value[val1] = min
		filterConfig.value[val2] = max
	}
	
	const handleIncome = (evt) => {
		const [min,max] = evt
		const {income} = useDictStore().getDict().value
		income.forEach(item=>{
			const {key,incomes} = item
			console.log(key,incomes,min,max)
			if(incomes.length >= 2){
				if(min >= incomes[0] && min < incomes[1]){
					filterConfig.value.minIncome = key
				}
			}else{
				if (min >= incomes[0]) { // incomes[0]为20000
				  filterConfig.value.minIncome = key;
				}
			}
			
			if(incomes.length >= 2){
				if(max > incomes[0] && max <= incomes[1]){
					filterConfig.value.maxIncome = key
				}
			}else{
				if (max >= incomes[0]) { // incomes[0]为20000
				  filterConfig.value.maxIncome = key;
				}
			}
		})
	}

	const handleClickBtn = (val) => {
		bthPickerIndex.value = val
		if (val === 0) {
			conditionList[0] = {
				title: '学历',
				subTitle: '（可多选）',
				arr: useDictStore().getDict().value.education,
			}
		}else if(val === 1){
			conditionList[0] = {
				title: '住房情况',
				subTitle: '（可多选）',
				arr: useDictStore().getDict().value.buyHouse,
			}
		}else if(val === 2){
			conditionList[0] = {
				title: '买车情况',
				arr: useDictStore().getDict().value.buyCar,
			}
		}else{
			conditionList[0] = {
				title: '有没有孩子',
				subTitle: '（可多选）',
				arr: useDictStore().getDict().value.isChild,
			}
		}
		experienceShow.value = true
	}

	const handleClickPicker = (val) => {
		pickerIndex.value = val
		if (val === 0) {
			pickerTitle.value = '居住地'
			columns[0] = useDictStore().getDict().value.city
			columns[1] = useDictStore().getDict().value.district
		} else {
			pickerTitle.value = '职业'
			columns[0] = useDictStore().getDict().value.career
			columns[1] = useDictStore().getDict().value.career[0].careers
		}
		pickerShow.value = true
	}

	const hanldeMarriage = (index) => {
		marriageIndex.value = index
	}

	const goSearch = () => {
		uni.navigateTo({
			url: "/pages/home/search"
		})
	}

	const popupClose = () => {
		experienceShow.value = false
	}

	const conditionSure = (item) => {
		const keys = item.map(i=>i.key)
		const vals = item.map(i=>i.val).join(',')
		if(bthPickerIndex.value === 0){
			filterConfig.value.educational = keys
			filterConfig.value.educationalVal = vals
		}else if(bthPickerIndex.value === 1){
			filterConfig.value.buyHouse = keys
			filterConfig.value.buyHouseVal = vals
		}else if(bthPickerIndex.value === 2){
			filterConfig.value.buyCar = keys
			filterConfig.value.buyCarVal = vals
		}else if(bthPickerIndex.value === 3){
			filterConfig.value.isChild = keys
			filterConfig.value.isChildVal = vals
		}
	}

	const confirm = (item) => {
		if(pickerIndex.value === 0){
			filterConfig.value.addressDistrictVal = `${item[0].name}-${item[1].name}`
			filterConfig.value.addressDistrict = item[1].code
		}else{
			filterConfig.value.workIdVal = item[1].name
			filterConfig.value.workId = item[1].id
		}
	}

	const cancel = () => {
		pickerShow.value = false
	}
	
	const handleSure = () => {
		uni.navigateBack()
	}
	
	const handleReset = () => {
		useDictStore().resetFilterConfig()
	}
</script>

<style lang="scss">
	.wrap {
		position: relative;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		&-search {
			position: relative;
			height: 62rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 200rpx 200rpx 200rpx 200rpx;

			&-fdj {
				width: 30rpx;
				height: 30rpx;
				background: url('/static/images/fdj.png') center/cover no-repeat;
			}

			&-text {
				margin-left: 16rpx;
				font-size: 30rpx;
				color: #999999;
			}

			&-btn {
				position: absolute;
				right: 0;
				width: 140rpx;
				height: 100%;
				background-color: #FF47AB;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 62rpx;
			}
		}

		&-condition {
			margin-top: 40rpx;
			padding: 40rpx 4rpx;
			box-sizing: border-box;
			background-color: #fff;
			font-weight: bold;
			font-size: 34rpx;
			color: #222222;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&-title {
				margin-left: 36rpx;
			}

			&-list {
				margin-top: 60rpx;

				&-t {
					margin-bottom: 30rpx;
					padding: 0 36rpx;
					box-sizing: border-box;

					&-l {
						font-size: 30rpx;
						color: #444444;
					}

					&-r {
						font-size: 30rpx;
						color: #FF47AB;
					}

					.marriage-list {
						width: 122rpx;
						height: 46rpx;
						margin-top: 40rpx;
						background-color: #EDEDED;
						text-align: center;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						font-size: 26rpx;
						color: #444444;
						box-sizing: border-box;
						border: 2rpx solid #EDEDED;

						&.active {
							background: rgba(255, 71, 171, 0.2);
							border: 2rpx solid #FF47AB;
							color: #FF47AB;
						}
					}
				}

				&-title {
					margin-left: 36rpx;
					font-size: 30rpx;
					color: #444444;

					&-small {
						font-size: 22rpx;
						color: #999999;
					}
				}

				::v-deep .u-cell {
					.u-cell__body {
						padding-left: 0;
						padding-right: 26rpx;
					}
				}
			}

			&-btn {
				margin-top: 80rpx;

				&-list {
					width: 295rpx;
					height: 96rpx;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 30rpx;
					border: 2rpx solid #FF47AB;
					box-sizing: border-box;
				}

				&-l {
					color: #FF47AB;
					background-color: rgba(255, 71, 171, 0.2);
				}

				&-r {
					color: #FFFFFF;
					background-color: #FF47AB;
					border-color: #FF47AB;
				}
			}
		}
	}
</style>